<template>
  <div>
    <div style="width: 100%; height: 50px; background-color: white">
      <div style="background-color: burlywood; width: 10px; height: 30px; margin-left: 1%"></div>
      <div class="jcyp">
        <h3 style="display: flex; float: left; margin-top: -7%; margin-left: 5%">精彩影评</h3>
      </div>
    </div>
    <div style="width: 100%; height: 350px; background-color: white">
      <el-card class="box-card" style="width: 100%">
        <div v-for="(o, index) in len" :key="o" class="text item">
          <div style="width: 100%; height: 200px; background-color: white">
            <div style="height: 50px; width: 50px">
              <el-image
                :src="headSrcs[index]"
                style="border-radius: 50%; overflow: hidden; margin-top: 2%; margin-left: 1%"
                class="image"
                width="100%"
                height="100%"
              />
            </div>
            <div>
              <span
                style="
                  display: flex;
                  float: left;
                  color: #333333;
                  font-size: larger;
                  margin-left: 20%;
                  margin-top: -13%;
                  font-weight: bold;
                "
              >
                {{ com_user[index] }}
              </span>
            </div>
            <div>
              <span
                style="
                  display: flex;
                  float: left;
                  color: darkgray;
                  font-size: medium;
                  margin-left: 41%;
                  margin-top: -11%;
                  font-weight: bold;
                "
              >
                {{ com_addTime[index] }}
              </span>
            </div>
            <div
              style="
                width: 100%;
                overflow: auto;
                height: 140px;
                background-color: white;
                margin-left: 10%;
              "
            >
              <span
                style="
                  display: flex;
                  font-size: smaller;
                  float: left;
                  overflow: auto;
                  text-align: left;
                  color: #333333;
                "
              >
                {{ com_desn[index] }}
              </span>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </el-card>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[4]"
        :page-size="4"
        layout="total,  prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
const currentPage4 = ref(1);
const com_user = ref([]);
const com_addTime = ref([]);
const com_desn = ref([]);
const commentAll = ref([]);
const headSrcs = ref([]);
const total = ref(0);
const len = ref(4);
onMounted(() => {
  const movieName = JSON.parse(sessionStorage.getItem('movieInfo'));
  axios.get('/api/movie/getMovieByMname/' + movieName).then(res => {
    if (res.data !== null) {
      axios.get('/api/comment/getAllCommentByMid/' + res.data[0].mid).then(res1 => {
        if (res1.data !== null) {
          commentAll.value = res1.data;
          total.value = commentAll.value.length;

          let lens = total.value > 4 ? 4 : total.value;
          len.value = lens;
          for (let i = 0; i < len.value; i = i + 1) {
            com_user.value.push(commentAll.value[i].username);
            com_addTime.value.push(commentAll.value[i].addTime);
            com_desn.value.push(commentAll.value[i].desn);
            headSrcs.value.push(require('@/assets/' + commentAll.value[i].headSrc));
          }
        } else {
          ElMessage({
            showClose: true,
            message: '网络错误！',
            type: 'error',
          });
        }

        console.log('*&*&*&*&*&*&*&*&*&*');
        console.log(headSrcs.value);
      });
    } else {
      ElMessage({
        showClose: true,
        message: '网络错误！',
        type: 'error',
      });
    }
  });
});
const handleCurrentChange = val => {
  currentPage4.value = val;
  com_user.value = [];
  com_addTime.value = [];
  com_desn.value = [];
  headSrcs.value = [];
  let index = (val - 1) * 4;
  let lens = total.value - index > 4 ? 4 : total.value - index;

  len.value = lens;
  for (let i = index; i < len.value + index; i = i + 1) {
    com_user.value.push(commentAll.value[i].username);
    com_addTime.value.push(commentAll.value[i].addTime);
    com_desn.value.push(commentAll.value[i].desn);
    headSrcs.value.push(require('../../../assets/' + commentAll.value[i].headSrc));
  }
};
</script>
<style lang="scss" scoped>
.jcyp {
  background-color: white;
  width: 100%;
  height: 30px;
  margin-left: 1%;
  margin-top: -1%;
}
.page {
  width: 100%;
  height: 50px;
  background-color: white;
  margin-top: 500px;
  margin-left: 100px;
}
</style>
